<template>
    <div class="cen-top">
        <div class="chart" ref="chart" id="mapEchart"></div>
    </div>
</template>
  
<script>
// 引入工具
import geoJson from "../../assets/json/geoJson.json"; //该文件路径改成自己项目中的文件路径即可
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { onMounted } from "vue";
import { useRouter } from "vue-router";
let nowClientWidth = document.documentElement.clientWidth;
export default {
    components: {},
    name: "Test",
    data() {
        return {
            chart: null,
        };
    },
    created() {
        // 新建一个promise对象
        let newPromise = new Promise((resolve) => {
            resolve();
        });
        //然后异步执行echarts的初始化函数
        newPromise.then(() => {
            //	此dom为echarts图标展示dom
            //让图表实现响应式布局
            this.initDk2();
        });
    },
    mounted() {
        window.addEventListener("resize", this.handleResizeMyChart1);
    },
    beforeDestroy() {
        // 页面销毁前
        window.removeEventListener("resize", this.handleResizeMyChart1); // 移除resize方法
    },
    unmounted() { },
    methods: {
        handleResizeMyChart1() {
            this.chart.resize(); //resize方法
        },
        nowSize(val, initWidth = 1920) {
            return val * (nowClientWidth / initWidth);
        },
        initDk2() {
            //初始化地图
            if (this.chart == null) {
                this.chart = echarts.init(this.$refs.chart);
            }
            // 重点：不要遗漏这句代码！！
            echarts.registerMap("china", geoJson);
            var mapData = []; var geoGpsMap = [118.11, 24.61];
            var geoCoordMap = {
                四川: [104.65, 31.06],
                陕西: [108.71, 34.02],
                浙江: [122.24, 30.09],
                宁波: [121.58, 29.98],
                浙江: [120.22, 29.75],
            }; var data = [
                {
                    name: "陕西",
                    value: 1,
                },
                {
                    name: "四川",
                    value: 1,
                },
                {
                    name: "浙江",
                    value: 1,
                },
            ];
            for (var key in geoCoordMap) {
                if (name.includes(key)) {
                    geoGpsMap = geoCoordMap[key];
                }
                const keys = key;
                const filters = data.filter((item) => {
                    return item.name.includes(keys);
                })[0];

                mapData.push({
                    name: key,
                    value: filters ? filters.value : 0,
                });
            }
            mapData.sort((a, b) => {
                return a.value - b.value;
            });
            const colors = ["#4a99de", "#003a8c"];
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };

            var convertToLineData = function (data, gps) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem.name];
                    var toCoord = gps; // gps：‘中心点’
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: gps,
                            toName: dataItem.name,
                            coords: [fromCoord, toCoord],
                        });
                    }
                }
                return res;
            };

            // 图表配置项
            let option = {
                // tooltip: {
                //   show: true,
                // },
                //热力图配置项
                // visualMap: [
                //   {
                //     type: "continuous",
                //     text: ["xxx"],
                //     calculable: true,
                //     max: 250,
                //     inPange: {
                //       color: ["#87aa66", "#eba438", "#d94d4c"],
                //     },
                //   },
                // ],
                //3D地图配置项
                geo3D: {
                    map: "china",
                    roam: true,
                    // environment: new echarts.graphic.LinearGradient(  // 设置背景渐变
                    //     0,
                    //     0,
                    //     0,
                    //     1,
                    //     [
                    //         {
                    //             offset: 0.1,
                    //             color: "blue", // 颜色1
                    //         },
                    //         {
                    //             offset: 0.5,
                    //             color: "#4CB35D", // 颜色2
                    //         },
                    //         {
                    //             offset: 1,
                    //             color: "#FDBF5B", // 颜色3
                    //         },
                    //     ],
                    //     false
                    // ),
                    selectedMode: "single", //地图高亮单选
                    regionHeight: 5, //地图高度
                    viewControl: {
                        projection: 'perspective',		// 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                        // autoRotate: true,				// 是否开启视角绕物体的自动旋转查看。[ default: false ] 
                        autoRotateDirection: 'cw',		// 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                        autoRotateSpeed: 10,			// 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                        autoRotateAfterStill: 3,		// 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                        damping: 0,						// 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                        rotateSensitivity: 1,			// 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                        zoomSensitivity: 1,				// 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                        panSensitivity: 1,				// 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                        panMouseButton: 'left',			// 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        rotateMouseButton: 'left',		// 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                        // distance: 200,					// [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                        // minDistance: 40,				// [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                        // maxDistance: 3000,				// [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                        alpha: 40, 						// 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                        beta: 15,						// 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                        minAlpha: -360,					// 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 360,					// 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360,					// 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360,					// 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        center: [0, 0, 0],				// 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                        animation: true,				// 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000,	// 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: 'cubicInOut'		// 过渡动画的缓动效果。[ default: cubicInOut ]

                    },
                    itemStyle: {
                        color: "#074a9a",
                        borderWidth: 2, //分界线wdith
                        borderColor: "#2eeaff", //分界线颜色
                        normal: {
                        },
                        emphasis: {
                            areaColor: "#389BB7",
                            borderWidth: 0,
                        },
                    },
                    label: {
                        show: true,
                        position: "top",
                        color: "#fff", //地图初始化区域字体颜色
                        fontSize: 14,
                        lineHeight: 16,
                    },
                    shading: "lambert",
                    light: {
                        //光照阴影
                        main: {
                            // color: "#fff", //光照颜色
                            intensity: 1, //光照强度
                            //shadowQuality: 'high', //阴影亮度
                            shadow: true, //是否显示阴影
                            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
                            alpha: 55,
                            beta: 10,
                        },
                        ambient: {
                            intensity: 0.7,
                        },
                    },
                },
                series: [
                    // 地图线的动画效果
                    {
                        type: "lines3D",
                        coordinateSystem: "geo3D",
                        zlevel: 10, //设置这个才会有轨迹线的小尾巴
                        polyline: false,
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                // offset: [5, 0], //偏移设置
                                color: "#3382a8",
                                formatter: "",
                                textStyle: {
                                    color: "#3382a8",
                                    fontSize: this.nowSize(16),
                                },
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        symbol: "circle",
                        symbolSize: 40,
                        effect: {
                            show: true,
                            period: 8, //箭头指向速度，值越小速度越快
                            trailLength: 1,//[0,1] // 尾迹的长度，范围从 0 到 1，为线条长度的百分比。特效尾迹长度[0,1]值越大，尾迹越长重
                            opacity: 1, // 尾迹线条透明度
                            trailWidth: 8, //宽度
                            trailColor: "red",
                            color: "#3382a8",//移动点的颜色
                            constantSpeed: 8,//速度
                            symbol: 'arrow', //箭头图标(无用)
                            // symbolSize: 30, //图标大小
                            // symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',//箭头图标
                            // symbol: "amarkLinesow",

                        },
                        //data必须存在才不会报
                        //data: this.lines3DData,
                        blendMode: "lighter",
                        data: convertToLineData(mapData, geoGpsMap),
                    },
                    {
                        type: 'map3D',  //新增一条数据区域图标
                        map: 'china',
                        itemStyle: {
                            opacity: 0  //设置透明度后，就不影响原来的图配色等功能，也不影响bar3D数据展示

                        },
                        viewControl: {
                            autoRotate: true,
                            projection: 'perspective',		// 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                            autoRotate: false,				// 是否开启视角绕物体的自动旋转查看。[ default: false ] 
                            autoRotateDirection: 'cw',		// 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                            autoRotateSpeed: 10,			// 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                            autoRotateAfterStill: 3,		// 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                            damping: 0,						// 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                            rotateSensitivity: 1,			// 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                            zoomSensitivity: 1,				// 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                            panSensitivity: 1,				// 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                            panMouseButton: 'left',			// 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                            rotateMouseButton: 'left',		// 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                            // distance: 200,					// [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                            // minDistance: 40,				// [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                            // maxDistance: 3000,				// [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                            alpha: 40, 						// 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                            beta: 15,						// 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                            minAlpha: -360,					// 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                            maxAlpha: 360,					// 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                            minBeta: -360,					// 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                            maxBeta: 360,					// 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                            center: [0, 0, 0],				// 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                            animation: true,				// 是否开启动画。[ default: true ]
                            animationDurationUpdate: 1000,	// 过渡动画的时长。[ default: 1000 ]
                            animationEasingUpdate: 'cubicInOut'		// 过渡动画的缓动效果。[ default: cubicInOut ]

                        },
                        selectedMode: "single", //地图高亮单选
                        regionHeight: 5, //地图高度
                        zlevel: 1, //设置层级，如不设置假如其他图标高则无法触发点击事件
                        itemStyle: {
                            color: "#074a9a",
                            borderWidth: 2, //分界线wdith
                            borderColor: "#2eeaff", //分界线颜色
                            normal: {
                            },
                            emphasis: {
                                areaColor: "#389BB7",
                                borderWidth: 0,
                            },
                        },
                    },
                    // 3D柱状图配置项
                    // {
                    //     name: "xxx",
                    //     type: "bar3D",
                    //     coordinateSystem: "geo3D",
                    //     barSize: 3,
                    //     shading: "lambert",
                    //     opacity: 1,
                    //     bevelSize: 0.2,
                    //     label: {
                    //         show: false,
                    //         formatter: "{a}",
                    //     },
                    //     //自定义的data数组 value中数组的含义:[杭州的经度or纬度，要展示的3d柱状图数值大小]
                    //     data: [
                    //         { name: "杭州", value: [120.161693, 30.280059, 643] },
                    //         { name: "温州", value: [120.705869, 28.001095, 98] },
                    //         { name: "湖州", value: [120.094566, 30.899015, 72] },
                    //         { name: "嘉兴", value: [120.762045, 30.750912, 131] },
                    //         { name: "绍兴", value: [120.586673, 30.036519, 116] },
                    //         { name: "丽水", value: [119.929503, 28.472979, 40] },
                    //         { name: "衢州", value: [118.880768, 28.941661, 22] },
                    //         { name: "金华", value: [119.654027, 29.084455, 156] },
                    //         { name: "台州", value: [121.426996, 28.662297, 110] },
                    //         { name: "宁波", value: [121.556686, 29.880177, 163] },
                    //         { name: "舟山", value: [122.214339, 29.991092, 20] },
                    //     ],
                    // },
                ],
            };
            this.chart.setOption(option);
            this.chart.on("click", 'series.map3D', (params) => {
                console.log(params);
                var that = this;
                if (params.name == "福建") {
                    this.$nextTick(function () {
                        that.$router.push("/hf3d");
                    })

                }
            });
        }
    }
}
</script>
  
<style lang="less" scoped>
.chart {
    width: 100%;
    height: 100%;
}

#mapEchart {
    -webkit-animation: fadeInUpBig 1s .2s ease both;
    -moz-animation: fadeInUpBig 1s .2s ease both;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(-2000px)
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}
</style>
  
  